import { Checkbox, Input, Select, Switch } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import { useState,useEffect } from "react";
import "./Style/AvailabilityTow/AvailabilityTow.css";
import request from "umi-request";
const response = await request.get("/api/AvailabilityTow");

const AvailabilityTow = () => {
  //状态h
  const [status, setstatus] = useState<boolean>(false);
  //tab表格数据
  const [tabarr, settabarr] = useState([
    {
      id: "788524244",
      checked: false,
      "paixu|100-1000": 100,
      xiaoqu: "@ctitle(4,6)",
      title: "@ctitle(10,15)",
      "mj|70-150": 70,
      "zj|70-150": 70,
      "checkedtwo|1": false,
    },
  ]);
  //下拉框
  const onChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  //input
  const { Search } = Input;
  //模糊搜索
  const onSearch = (value: string) => {
    console.log("search:", value);
  };
  //底部多选框
  const Checkboxs = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //批量删除
  function delAll() {
    console.log("批量删除", 1);
  }
  //顶部多选框
  function checkAll(e: any) {
    console.log(`checkAll = ${e.target.checked}`);
  }
  //单选
  function check(e: any) {
    console.log(`单选 = ${e.target.checked}`);
  }
  //状态
  function statu(e: any) {
    console.log("状态", e);
    if (e == true) {
      setstatus(e);
      setTimeout(() => {
        setstatus(false);
      }, 2000);
    } else {
      setstatus(true);
      setTimeout(() => {
        setstatus(false);
      }, 2000);
    }
  }
  //编辑点击事件
  function edit() {
    console.log("编辑", 1);
  }
  //删除点击事件
  function del() {
    console.log("删除", 1);
  }
  useEffect(()=>{
    settabarr(response)
  },[])
  return (
    <div className="AvailabilityTowBox">
      <div className="AvailabilityTowHeader">
        <div className="AvailabilityTowHeaderOne">
          <p>状态</p>
          <div>
            <Select
              showSearch
              placeholder="-所有-"
              optionFilterProp="children"
              onChange={onChange}
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={[
                {
                  value: "所有",
                  label: "所有",
                },
                {
                  value: "启用",
                  label: "启用",
                },
                {
                  value: "禁用",
                  label: "禁用",
                },
              ]}
            />
          </div>
        </div>
        <div className="AvailabilityTowHeaderTow">
          <p>关键词</p>
          <div>
            <Search
              placeholder="输入关键词搜索"
              allowClear
              enterButton="搜索"
              size="middle"
              onSearch={onSearch}
            />
          </div>
        </div>
      </div>
      <div className="AvailabilityTowMain">
        {/* tab表格 */}
        <table className="table" cellSpacing={0}>
          {/* 头部 */}
          <thead>
            <tr>
              <td>
                <input onClick={checkAll} type="checkbox" />
              </td>
              <td>ID</td>
              <td>小区名称</td>
              <td>标题</td>
              <td>面积</td>
              <td>总价</td>
              <td>排序</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
          {/* 中间 */}

          <tbody>
            {/* 渲染 */}
            {tabarr
              ? tabarr.map((item: any, index: number) => {
                  return (
                    <tr key={index}>
                      <td>
                        <input onClick={check} type="checkbox" />
                      </td>
                      <td style={{ width: "15vw" }}>{item.id}</td>
                      <td style={{ width: "15vw" }}>{item.xiaoqu}</td>
                      <td style={{ width: "18vw" }}>{item.title}</td>
                      <td style={{ width: "5vw" }}>{item.mj}</td>
                      <td style={{ width: "5vw" }}>{item.zj}</td>
                      <td style={{ width: "5vw" }}>{item.paixu}</td>
                      <td style={{ width: "8vw" }}>
                        <Switch
                          size="default"
                          checkedChildren="正常"
                          unCheckedChildren="待审"
                          defaultChecked
                          onChange={statu}
                        />
                      </td>
                      <td>
                        <button className="bj" onClick={edit}>
                          编辑
                        </button>
                        <button className="del" onClick={del}>
                          删除
                        </button>
                      </td>
                    </tr>
                  );
                })
              : ""}
          </tbody>
        </table>
        {/* 状态显示 */}
        <div
            className="tbodystatu"
            style={{
              display: status ? "block" : "",
            }}
          >
            <img src={require("../../imgs/tu.png")} alt="" />
          </div>
      </div>
      <div className="AvailabilityTowFoot">
        <div className="AvailabilityTowFootA">
          <div>
            <Checkbox onChange={Checkboxs}>全选/取消</Checkbox>
          </div>
          <button onClick={delAll}>删除</button>
        </div>
      </div>
    </div>
  );
};

export default AvailabilityTow;
